<template>
  <div>
     <!-- top提示 -->
      <Tips/>
      <!-- 购物车内容 -->
      <van-checkbox-group :disabled="isEditor" v-model="result" ref="checkboxGroup" v-if="cartList.length>0">
                <van-checkbox @click="selectGoods(item)" :v-model="item.checked" :name="item.id" class="sel" v-for="item in cartList" :key='item.id'>
                  <van-swipe-cell >

                              <van-card
                              :num="item.num"
                              :price="item.price"
                              :title="item.goodsName"
                              class="goods-card"
                              :thumb="item.img"/>
                              <van-stepper min="1" max="100" v-show="isEditor" v-model="item.num" @change="updateCartItem(item)" />

                      <template #right>
                       <van-button square text="删除" type="danger" @click="removeCartItem(item.id)" class="delete-button" />
                      </template>
                      
                  </van-swipe-cell> 
                </van-checkbox>
              
    </van-checkbox-group>
    <!-- 购物车为空时展示 -->
    <div class="empty" v-else>
      <img src="" alt="">
      <h3>购物车竟然是空的</h3>
      <p>再忙,也要记得买点什么犒赏自己哟</p>
    </div>
    <!-- 底部结算区域 -->
    <van-submit-bar :price="cartTotal.checkGoodsCount*100" button-text="结算" @submit="onSubmit" >
    <template #tip v-if="cartList.length > 0">
      <van-checkbox v-model="isFlag" @click="checkedAll"  :disabled="isEditor">全选</van-checkbox>
      累计共<span>{{cartList.length}}</span>件商品，可点击<van-button type="default" size="small" round @click="isEditor=!isEditor">{{isEditor ? '完成编辑' : '编辑'}}</van-button>按钮进行商品数量修改
    </template>
    </van-submit-bar>


    <MyFooter/> 
  </div>
  
</template>

<script>
  import axios from 'axios'
  import Tips from '../components/Tips'
  import MyFooter from '../components/MyFooter'
  export default {
      name:'ShoppingCart',
      components:{Tips,MyFooter},
      data() {
            return {
                result: [],
                cartList:[],
                isEditor:false,
                isFlag:false,
                cartTotal:{
                  checkGoodsCount:0,
                  isCheckAll:false,
                  goodsCount:0,
                }
            }
      },
      methods: {
        //获取购物车数据
        getCartList(){
          axios({
            url:'http://localhost:8080/api/getCartList',
            method:'POST',
            
          }).then(
            response=>{
              this.cartList=response.data;
              this.result=[];
              this.cartList.map(element => {
                  if (element.checked==1) {
                    this.result.push(element.id);
                  }
              });
              console.log("==========",this.cartList);
            },error=>{
              console.log(error.message);
            }
          )
          axios({
            url:'http://192.168.33.238:8080/api/getCartList',
            method:'POST',
            
          }).then(
            response=>{
              this.cartList=response.data;
              this.result=[];
              this.cartList.map(element => {
                  if (element.checked==1) {
                    this.result.push(element.id);
                  }
              });
              console.log("==========",this.cartList);
            },error=>{
              console.log(error.message);
            }
          )
        },
        
        //删除
        removeCartItem(id){
          axios({
            url:'http://localhost:8080/api/deleteCartList',
            method:"POST",
            params:{
              id:id
            }
          }).then(
            response=>{
              this.cartList=response.data;
            },
            error=>{
              console.log(error.message);
            }
          )
          axios({
            url:'http://192.168.33.238:8080/api/deleteCartList',
            method:"POST",
            params:{
              id:id
            }
          }).then(
            response=>{
              this.cartList=response.data;
            },
            error=>{
              console.log(error.message);
            }
          )
        },
        //修改
        updateCartItem(item){
          this.cartList.forEach(it=>{
            if (it.id==item.id) {
              if (it.num-item.num==0) {
                console.log(1111111111111111);
                return
              } else if(it.num-item.num>0){
                console.log(222222222222222222);
                this.cartTotal.checkGoodsCount+=(it.num*(it.num-item.num));
              }else {
                console.log(33333333333333333);
                this.cartTotal.checkGoodsCount-=(it.num*(item.num-it.num));
              }
            }
          })
          axios({
            url:'http://localhost:8080/api/updateCartList',
            method:"POST",
            params:{
              id:item.id,
              num:item.num,
              checked:item.checked,
            }
          }).then(
            response=>{
              this.getCartList();
            },
            error=>{
              console.log(error.message);
            }
          )
          axios({
            url:'http://192.168.33.238:8080/api/updateCartList',
            method:"POST",
            params:{
              id:item.id,
              num:item.num,
              checked:item.checked,
            }
          }).then(
            response=>{
              this.getCartList();
            },
            error=>{
              console.log(error.message);
            }
          )
        },
        onSubmit(){
          if (this.cartList.length==0||this.cartTotal.goodsCount==0) {
            this.$toast.fail("你还未选择商品");
          } else {
            this.$toast('你所在的地区暂不支持购买');
          }
        },
        selectGoods(item){
         if (this.isEditor) {
           return
         } else {
           if (item.checked==0) {
             this.cartTotal.goodsCount+=1;
             this.cartTotal.checkGoodsCount+=(item.num*item.price);
           } else {
             this.cartTotal.goodsCount-=1;
             this.cartTotal.checkGoodsCount-=(item.num*item.price);
           }
            item.checked==1?0:1;
            item.checked=item.checked==1?0:1;
         }
          
        },
        checkedAll(){
          if (this.isEditor) {
            return 
          } 
            console.log(this.isFlag);
            this.isFlag==!this.isFlag;
            this.$refs.checkboxGroup.toggleAll();
            this.cartList.forEach(it=>{
              if (it.checked==false) {
                this.cartTotal.checkGoodsCount+=(it.num*it.price)
              } else {
                  this.cartTotal.checkGoodsCount-=(it.num*it.price)
                
              }
              it.checked=!it.checked;
          })
        }
      },
      mounted() {
        let userInfo = localStorage.getItem("userInfo");
        if(userInfo ==null){
          alert("没登录,死去登录");
          this.$store.commit("historyOptions/changeIfgoBack", true); 
          this.$router.push("/user");
        } 

        this.getCartList();     
      },
     
  }
</script>

<style scoped>
  
  .goods-card {
    margin: 0;
    background-color: white;
  }
  
.van-card {
    position: relative;
    box-sizing: border-box;
    padding: 8px 16px;
    color: #323233;
    font-size: 12px;
    background-color: #fafafa;
}
  .delete-button {
    height: 100%;
  }
  .van-card__price {
    color: darkred;
  }
  .van-card__num{
    color: blue;
  }
  .van-card__content{
    width: 200px;
    text-align: left;
  }
  .van-stepper{
    text-align: right;
  }
  .van-submit-bar{
    text-align: left;
    bottom: 52px;
  }
  .van-swipe-cell{
    padding:10px 0;
    border-bottom: solid 1px #ccc;
  }
</style>